在熟悉 selector 後，就可以開始採用物件連結的方式進行各種作業
最基本常見的方法便是取得內容或修改。你可以抽換文字或 HTML，也能一同更換自己 HTML
| 內容存取 | 說明 |
|---|---|
| .html(“HTML”) | 同 JavaScript .innerHTML() |
| .text(“String”) | 同 JavaScript .textContext() |
| .replaceWith(“HTML”) | 替換 HTML 連同自己該層 |
另個方法是在兄弟層級上進行增減
| 相對位置插入 | 說明 |
|---|---|
| .before(“HTML”) | 同層之上增加 HTML |
| .after(“HTML”) | 同層之下增加 HTML |
| .append(“HTML”) | 內部之底增加 HTML |
| .prepend(“HTML”) | 內部之初增加 HTML |
selector能夠被複製移除或清空，也能接著繼續增加add()另一個selector，便於之後method一同執行。
| 節點處理 | 說明 |
|---|---|
| .clone() | 複製該 select 的節點內容 |
| .remove() | 把該 select 移除，會 return 目前 HTML |
| .detach() | 同上，但 return 會額外保留相關依據行為（適合有還原需求） |
| .empty() | 把自己子內容清空 |
對 selector 的屬性操作，可輕鬆對 attr,style,class,id,value 做任何的存取調整。其中 css 部分除了參數處理，也能用 json 包住做多筆 CSS 指定
| 屬性處理 | 說明 |
|---|---|
| .attr(“width”) | 取得屬性 width 值 |
| .attr(“width”,”100”) | 設定屬性 width=100 |
| .removeAttr(“style”) | 移除屬性 style |
| .addClass(“hot”) | 增加 class=hot |
| .removeClass(“hot”) | 移除 class=hot |
| .toggleClass(“hot”) | 增加或移除 class=hot |
| .css(“color”) | 取得 css 之 color 值 |
| .css(“color”,”red”) | 設定 CSS 之 color=red |
| .css({“color”:”red”,”font-size”:”14px”}) | 設定多筆 CSS（以 JSON 方式） |
| .val() | 取得屬性 value 值 |
| .val(“loki”) | 設定 value=loki |
也能透過selector做精準的過濾條件
| 遍歷 selector | 說明 |
|---|---|
| .parent(“#myid”) | 父層級且 id=myid 之目標 |
| .parents() | 同上，延伸到所有祖先 |
| .children(“.mycls”) | 子層級1階內之 class=mycls 之目標 |
| .find(“li”) | 子孫層級N階內有 li 之目標 |
| .next() | 該位置之同層級，找下一個標籤 |
| .prev() | 該位置之同層級，找前一個標籤 |
| .siblings(selector) | 該位置之同層級，找到指定標籤 |
event 事件與 JavaScript 差異不大，差別於簡化了編寫上的速度
| BOM 相關 | 說明 |
|---|---|
| .width() 與 .height() | 同 CSS 設定或取得 width 與 height 尺寸 |
| .offset() | 回傳物件（絕對座標）包含。top 與。left |
| .position() | 回傳物件（相對座標）包含。top 與。left |
| .scrollLeft() | X 軸滾輪 bar 之位置或指定 |
| .scrollTop() | Y 軸滾輪 bar 之位置或指定 |
| .ready(function(){}) | DOM 載入完畢後執行 fucntion |
| .load(function(){}) | 網頁載入完畢後執行 fucntion |
| .on(“click”,function(){}) | 添加 event 事件，參數分別為類型與執行 function |
| .off(“click”,function(){}) | 關閉 event 事件，同上 |
| .click or .submit() or .hover() | 與前者相同，屬於另一種簡略寫法 |
DOM載入後執行的寫法為$(document).reday(function(){})，另一種簡寫為 $(function(){})
on()可以綁兩種事件做同件事，譬如 on("focus blur",()=>{console.log("event")});
iThome鐵人賽
看影片追技術